<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>注册(1/3)</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/global.css"/>
    <link rel="stylesheet" href="../css/regist1.css"/>
    <script src="../lib/autoSize.js"></script>
</head>

<body>
<header>
    <div class="left-btn">
        <img class="back" src="../images/header/back.png" alt="" onclick="history.go(-1)">
    </div>
    <h1 class="">注册（1/3）</h1>
    <div class="right-btn">
        <!-- 此处写右边按钮-->
    </div>
</header>

<main>
    <div class="area_white">
        <div id="phone" class="form_control">
            <img src="../images/icons/phone.png" alt="">
            <input class="input_control full_input" type="text" value="" placeholder="请输入手机号" name="phone">
        </div>
        <div id="verify" class="form_control">
            <img src="../images/icons/verify.png" alt="">
            <input class="input_control full_input" type="text" value="" placeholder="请输入验证码" name="verify">
            <span id="get_verify" class="btn blue">获取验证码</span>
        </div>
    </div>
    <div class="text-center mt10">
        <button class="btn btn_primary">下一步</button>
    </div>
</main>

<script src="../lib/jquery-3.2.1.min.js"></script>
<script src="../js/common.js"></script>
<script src="../lib/layer.js"></script>
<script>
    // 返回
    //    下一步
    $(".btn_primary").on("click", function () {
        if(!$("#phone input").val() || !(/^1[34578]\d{9}$/.test($("#phone input").val()))){
            layer.open({
                content: '请填写正确的手机号！',
                skin: 'msg',
                time: 1
            });
        }else if($("#verify input").val() == ""){
            layer.open({
                content: '请填写验证码！',
                skin: 'msg',
                time: 1
            });
        }else{
            API.validateCode($("#phone input").val(),$("#verify input").val(),function (data) {
                //                if(data.status == "1"){
                    //                }
                    window.location = 'regist2.html?phoneNum='+$("#phone input").val();
                },function (err) {
                    layer.open({
                        content: err,
                        skin: 'msg',
                        time: 1
                    });
                })
            }
        })
        
        //    获取验证码
        $("#get_verify").on("click", function () {
        checkVerify();
    })

    //    验证码
    var flag = true;
    function checkVerify() {
        if(!$("#phone input").val() || !(/^1[34578]\d{9}$/.test($("#phone input").val()))){
            layer.open({
                content: '请填写正确的手机号！',
                skin: 'msg',
                time: 1
            });
        }else if($("#verify span").text() == "获取验证码"){
            if(flag){
                flag = false;
                verifyTime();
                API.sendMessage($("#phone input").val(),function (data) {
                    layer.open({
                        content: data.message,
                        skin: 'msg',
                        time: 1
                    });
                })
            }else{
                layer.open({
                    content: '正在发送验证码，请稍后！',
                    skin: 'msg',
                    time: 1
                });
            }
        }
    }

//    验证码倒计时
    var timer = null;
    function verifyTime() {
        var time = 120;
        timer = setInterval(function () {
            time--;
            $("#verify span").text(time).css("color","#bbb");
            if(time === 0){
                clearInterval(timer);
                $("#verify span").css("color","#0778dd").text("获取验证码");
                flag = true;
            }
        },1000);
    }
</script>
</body>
</html>